<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
      style="z-index: 1"
  >
<!--  自行车LOGO  -->
<!--    <el-menu-item index="0"><Apple style="width: 3em; height: 4em; margin-right: 8px" /></el-menu-item>-->
    <el-menu-item index="0"><svg style="width: 4.5em; height: 5em;" t="1662648013248" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2174" width="200" height="200"><path d="M752 416c-9.824 0-19.456 0.768-28.96 1.92L645.664 176H512a32 32 0 0 0 0 64h86.912l21.248 66.432-328.096 198.432-70.688-112.864H256a32 32 0 0 0 0-64H96a32 32 0 0 0 0 64h49.856l75.584 120.672c-4.448-0.32-8.896-0.672-13.44-0.672C110.944 512 32 590.976 32 688S110.944 864 208 864s176-78.976 176-176a175.456 175.456 0 0 0-57.088-129.376l313.312-189.536 20.8 64.96C573.664 469.984 512 555.872 512 656c0 132.352 107.648 240 240 240s240-107.648 240-240-107.648-240-240-240z m-544 384C146.24 800 96 749.76 96 688S146.24 576 208 576s112 50.24 112 112S269.76 800 208 800z m544 32a176.224 176.224 0 0 1-176-176 176.16 176.16 0 0 1 104.608-160.704l56.736 177.344a31.968 31.968 0 1 0 60.928-19.52l-55.232-172.672c2.976-0.128 5.952-0.448 8.96-0.448 97.024 0 176 78.976 176 176S849.024 832 752 832z" p-id="2175">
    </path></svg>
     <h2 style="margin-left: 15px;font-family: '微软雅黑', serif">共享单车优化与单车调度系统</h2></el-menu-item>

    <div class="flex-grow" />

    <!-- 上传数据 -->
    <!--
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>上传数据</span>
          </template>
          <el-menu-item-group>
            <template #title></template>
            <el-menu-item index="1-1">上传共享单车轨迹点</el-menu-item>
            <el-menu-item index="1-2">上传停车点位</el-menu-item>
            <el-menu-item index="1-3">上传路网数据</el-menu-item>
          </el-menu-item-group>
          &lt;!&ndash;      <el-menu-item-group title="Group Two">
                  <el-menu-item index="1-3">item three</el-menu-item>
                </el-menu-item-group>
                <el-sub-menu index="1-4">
                  <template #title><span>item four</span></template>
                  <el-menu-item index="1-4-1">item one</el-menu-item>
                </el-sub-menu>&ndash;&gt;
        </el-sub-menu>
    -->

    <!--可视化-->
    <el-sub-menu index="2">
      <template #title>
        <el-icon><icon-menu /></el-icon>
        <span>可视化</span>
      </template>
      <el-menu-item-group>
        <template #title></template>
        <el-menu-item index="2-1" @click="isshowBikeTrace">单车轨迹点</el-menu-item>
        <el-menu-item index="2-2" @click="isshowRoadNet">路网数据</el-menu-item>
        <el-menu-item index="2-3" @click="isShowODPoint">OD点提取</el-menu-item>
        <el-menu-item index="2-4" @click="isshowHotParkPoint">停车点单车量</el-menu-item>


<!--        <el-menu-item index="2-5" @click="isshowTraceCounts">单车流量</el-menu-item>-->

      </el-menu-item-group>
    </el-sub-menu>

    <!-- 骑行绿道提取 -->
    <el-sub-menu index="3">
      <template #title>
        <el-icon><icon-menu /></el-icon>
        <span>高流量道路提取</span>
      </template>
      <el-menu-item-group>
        <template #title></template>
<!--        <el-menu-item index="3-1">轨迹点路网匹配</el-menu-item>-->
        <el-menu-item index="3-2"  @click="isshowTraceCounts">轨迹量等级划分</el-menu-item>
<!--        <el-menu-item index="3-3">种子路段提取</el-menu-item>-->
        <el-menu-item index="3-4" @click="isShowGreenTrace">设置流量提取区间</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>

    <!--单车调度-->
<!--    <el-menu-item index="4" style="height: 72px;">
      <el-icon><setting /></el-icon>
      <template #title>单车调度</template>
    </el-menu-item>-->
    <el-sub-menu index="4">
      <template #title>
        <el-icon><location /></el-icon>
        <span>单车调度</span>
      </template>
      <el-menu-item-group>
        <template #title></template>
        <el-menu-item index="4-1" @click="isShowCityDispatchDialog">城市模式</el-menu-item>
        <el-menu-item index="4-2" @click="isShoAreaDispatchDialog">区域模式</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>

    <el-sub-menu index="5">
      <template #title>我的</template>
      <el-menu-item index="5-1">个人资料</el-menu-item>
      <el-menu-item index="5-2" @click="exitLogin">退出登录</el-menu-item>
    </el-sub-menu>



<!--  登录注册头像  -->
    <div style="display: flex;justify-content: center;align-items: center;margin-right:30px"
         @click="this.$router.push('/Login')"
    >
      <el-avatar :size="45" src="../src/assets/blog-1.jpg" />

    </div>
  </el-menu>
</template>

<script lang="ts" setup>
import "../pages/Map.vue";
import { ref, reactive, toRefs} from 'vue'
import store from "../store/index.js";
import router from "../router/index.js";
import axios from "axios";
import Point from "ol/geom/Point"
import WKT from "ol/format/WKT";
import { Fill, Stroke, Style, Text , Circle, Icon} from "ol/style";



const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
//用户头像
const state = reactive({
  circleUrl:
      'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  squareUrl:
      'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  sizeList: ['small', '', 'large'] as const,
})
const { circleUrl, squareUrl, sizeList } = toRefs(state)

//向父组件Home.vue传递isShowBikeTrace值为True的信息
const emit = defineEmits<{(e:'toFather',
                           isShowBikeTrace:boolean,
                           isShowRoadNet:boolean,
                           isShowTraceCounts:boolean,
                           isShowHotParkPoint:boolean,
                           isShowODPoint:boolean,
                           isShowGreenTrace:boolean):void}>()
const isshowBikeTrace = () =>{
  emit('toFather',true,false,false,false,false,false)
}
//向父组件Home.vue传递isShowRoadNet值为True的信息
const isshowRoadNet = () =>{
  emit('toFather',false,true,false,false,false,false)
}
//向父组件Home.vue传递isShowRoadNet值为True的信息
const isshowTraceCounts = () =>{
  emit('toFather',false,false,true,false,false,false)
}
//向父组件Home.vue传递isShowHotParkPoint值为True的信息
const isshowHotParkPoint = () =>{
  emit('toFather',false,false,false,true,false,false)
}
//向父组件Home.vue传递isShowODPoint值为True的信息
const isShowODPoint = () =>{
  emit('toFather',false,false,false,false,true,false)
}
//向父组件Home.vue传递isShowGreenTrace值为True的信息
// const isShowGreenTrace = () =>{
//   emit('toFather',false,false,false,false,false,true)
// }

//isShowGreenTrace 全局变量
const isShowGreenTrace = () => {
  var isShow=store.state.isShowGreenTrace
  console.log(isShow)
  if(isShow==true){
    isShow=false
    store.commit('changeIsShowGreenTrace',isShow)
  }else {
    isShow=true
    store.commit('changeIsShowGreenTrace',isShow)
  }
  console.log(store.state.isShowGreenTrace)
}

/*控制对话框显示隐藏*/
const isShoAreaDispatchDialog=()=> {
  let isShow = store.state.isShowAreaSmartDispatch
  if (isShow === true) {
    store.commit('changeIsShowSmallDispatch', false)
  } else {
    store.commit('changeIsShowSmallDispatch', true)
  }
}

const isShowCityDispatchDialog=()=> {
  let isShow = store.state.isShowCitySmartDispatch
  if (isShow === true) {
    store.commit('changeIsShowCityDispatch', false)
  } else {
    store.commit('changeIsShowCityDispatch', true)
  }
}
//注销登录
const exitLogin=()=>{
  store.commit('delToken');
  console.log('退出登录')
  router.push('/Login')
}
</script>

<style>
.flex-grow {
  flex-grow: 1;
}
</style>
